<template>
  <div class="EmpA02">
    <div class="showText" @click="visible=true">
      <span v-if="!jobText">共 {{tableData.length}} 条</span>
      <span v-else>  {{jobText}} </span>
    </div>
    <el-drawer
        custom-class="crud-drawer"
        title="工作单位及职务"
        :visible.sync="visible"
        size="65%"
    >
      <commonTable
          :gridColumns="gridColumns"
          width="100%"
          :options="tableData"
          height="550px"
          @changeRow="changeRow"
          @delRow="delRow"
      >
        <commonSearch>
          <el-button slot="left" type="primary" @click="addRow">新增</el-button>
        </commonSearch>
      </commonTable>
    </el-drawer>
    <!--<el-drawer
      title="工作单位及职务"
      size="75%"
      append-to-body
      custom-class="crud-drawer"
      :visible.sync="visible">
      <el-table
        class="lt-table"
        :data="tableData"
        border >
        <lt-table-column-edit
          align="center"
          prop="a02043"
          state="date"
          placeholder="请选择"
          format="yyyy.MM"
          value-format="yyyy.MM"
          width="120"
          label="决定或批准任职的日期"/>
        <lt-table-column-edit
          align="center"
          prop="a02065"
          state="date"
          width="120"
          placeholder="请选择"
          format="yyyy.MM"
          value-format="yyyy.MM"
          label="决定或批准任职的日期"/>
        <lt-table-column-edit
          prop="a02001B"
          placeholder="请选择"
          state="departTreeSelect"
          label="统计关系所在单位"
            width="140">
        </lt-table-column-edit>
        <lt-table-column-edit
          prop="a02001C"
          label="任职机构名称"
          align="center" 
          width="140"
          type="textarea" />
        <lt-table-column-edit
          prop="a02016A" 
          label="职务名称"
          align="center"
          type="textarea" />
        <lt-table-column-edit
          prop="a02008"
          state="formSelectTree"
          label="职务属性"
          align="center"
          code-key="SD_DM049"
          value-key="nameCn"/>
        <lt-table-column-edit
          prop="a02066"
          state="formCodeSelect"
          label="是否占领导编制职数"
          align="center"
          code-key="whether"/>
        <lt-table-column-edit
          prop="a02049"
          state="input" 
          label="任职原因" 
          align="center" 
          type="textarea" 
          textSpan
          show-overflow-tooltip />
        <lt-table-column-edit
          prop="a02050"
          state="formCodeSelect"
          label="是否调任"
          align="center"
          code-key="whether"/>
        <lt-table-column-edit 
          state="input"
          prop="a02023" 
          label="多职务主次序号"
          :props="{value: 'name'}"
          code-key="whether"
          align="center" 
          type="number"
        />
        <lt-table-column-edit
          prop="sdZwSfzyzw"
          state="formCodeSelect"
          label="是否主要职务"
          align="center"
          :props="{value: 'name'}"
          code-key="whether"/>
        <lt-table-column-edit
          prop="a020730"
          state="formCodeSelect"
          label="是否领导班子成员"
          align="center"
          :props="{value: 'name'}"
          code-key="whether"/>
        <lt-table-column-edit
          prop="zwSfldzw"
          state="formCodeSelect"
          label="是否领导职务"
          align="center"
          :props="{value: 'name'}"
          code-key="whether"/>
        <lt-table-column-operation
          v-model="tableData"
          :row-data="form"
          width="100"
          @save="saveNewData"
          @delete="deleteData"
          validate-prop="a02001C, a02016A"
          primary-key="id"/>
      </el-table>
    </el-drawer>-->

    <commonDialog
        is-draggable
        :visible.sync="showAddDialog"
        title="新增"
        top="12vh"
        width="1000px"
        height="650px"
        :save="saveForm"
    >
      <commonForm>
        <formRow label="决定或批准任职的日期" required>
          <formDate v-model="form.a02043"></formDate>
        </formRow>
        <formRow label="决定或批准免职的日期">
          <formDate v-model="form.a02065"></formDate>
        </formRow>

        <formRow label="任职机构代码(统计关系)"  required>
          <formSelectInput
              v-model="form.a02001B"
              :props="{
              value: 'id',
              label: 'name',
              children: 'children',
            }"
              @save="changeA02001B"
              :label.sync="form.a02001BLabel"
              valueKey="id"
              :options="orgTree"
              placeholder="统计关系所在单位"
          />
          <span></span>
          <span slot="lableOther">
            <span style="color: red">选到科室</span>
          </span>
        </formRow>
        <formRow label="任职机构名称" required >
          <formInput v-model="form.a02001C" />
        </formRow>
        <formRow label="职务代码" required>
          <formSelectInput v-model="form.a02016B" @save="changeA02016B" code-key="GB/T12403-1990" value-key="nameCn">
          </formSelectInput>
        </formRow>
        <formRow label="职务名称">
          <formInput :value="form.a02016A">
          </formInput>
        </formRow>
        <formRow label="职务属性" required>
          <formSelectInput v-model="form.a02008" code-key="SD_DM049" value-key="nameCn">
          </formSelectInput>
        </formRow>
        <formRow label="是否占领导编制职数" required>
          <formCodeSelect v-model="form.a02066" code-key="whether" >
          </formCodeSelect>
        </formRow>
        <formRow label="任职状态" required>
          <formCodeSelect v-model="form.a02055" code-key="DM007" :props="{value: 'name'}" >
          </formCodeSelect>
        </formRow>
        <formRow label="任职方式" required>
          <formCodeSelect v-model="form.a02047" code-key="DM003" :props="{value: 'name'}">
          </formCodeSelect>
        </formRow>
        <formRow label="任职原因" required>
          <formSelectInput v-model="form.a02049" codeKey="DM004" valueKey="nameCn">
          </formSelectInput>
        </formRow>
        <formRow label="是否调任" required>
          <formCodeSelect v-model="form.xxxx" code-key="whether" :props="{value: 'name'}" >
          </formCodeSelect>
        </formRow>
        <formRow label="多职务主次序号" required>
          <formInput v-model="form.a02023" type="number" />
        </formRow>
        <formRow label="是否主要职务" required>
          <formCodeSelect v-model="form.sdZwSfzyzw" code-key="whether" :props="{value: 'name'}" >
          </formCodeSelect>
        </formRow>
        <formRow label="是否班子领导成员" required>
          <formCodeSelect v-model="form.a020730" code-key="whether" :props="{value: 'name'}" >
          </formCodeSelect>
        </formRow>
        <formRow label="是否领导职务" required>
          <formCodeSelect v-model="form.zwSfldzw" code-key="whether" :props="{value: 'name'}" >
          </formCodeSelect>
        </formRow>

      </commonForm>
    </commonDialog>
  </div>
</template>

<script>
import orgTree from '@/assets/orgTree.json'
export default {
  name: "EmpA02",
 // 全日制教育
  // 政治面貌
  props: {
    value: {
      type: Array,
      default: ()=>[]
    },
    jobText: {
      type: String,
      default: ''
    }
  },
  created() {
    
  },
  // 政治面貌
  data() {
    return {
      orgTree,
      visible: false,
      visible2: false,
      a02001BLabel: '',
      gridColumns: [
        {
          dataIndex: 'a02043',
          "text": "决定或批准任职的日期",
          "width": "150",
          "align": "center",
        },
        {
          dataIndex: 'a02065',
          text: '决定或批准免职的日期',
          align: "center"
        },
        // {
        //   dataIndex: 'a02001B',
        //   text: '统计关系所在单位',
        //   width: "150",
        //   align: "center"
        // },
        {
          dataIndex: 'a02001C',
          text: '任职机构名称',
          width: "150",
          align: "center"
        },
        {
          dataIndex: 'a02016A',
          text: '职务名称',
          align: "center"
        },
        {
          dataIndex: 'zwSfldzw',
          text: '是否占领导编制职数',
          align: "center"
        },
        {
          dataIndex: 'a02055',
          text: '任职状态',
          width: "140",
          align: "center",
          // formatter: scope => {
          //   return {
          //     text: scope.row.a16012,
          //     showText: true,
          //   };
          // }
        },
        {
          dataIndex: 'a02023',
          text: '多职务主次序号',
          width: "150",
          align: "center"
        },
        {
          text: "操作",
          align: "center",
          fixed: "right",
          width: "70",
          formatter: scope => {
            return {
              showDropDown: true,
              text: "操作",
              data: [
                {text: "修改", class: "blue", eName: "changeRow"},
                {text: "删除", class: "red", eName: "delRow"},
              ]
            };
          }
        }
      ],
      showAddDialog: false,
      form: {
        "a02001C": "", // 任职机构 名称
        "a02001B": "", //  任职机构代码  统计关系所在单位
        "a02001BLabel": "", //  任职机构代码  统计关系所在单位
        "a02008": "", // 职务属性
        "a02016A": "",  // 职务名称
        "a02016B": "", // 职务代码
        "a02023": "", // 多职务主次序号
        "a02043": "", // 决定或批准任职的日期
        "a02047": "", // 任职方式 (表里没有)
        "a02049": "", // 任职原因
        "a02050": "", // xxx? 调任
        "a02055": "", // 任职状态
        "a02065": "", //  决定或批准免职的日期
        "a02066": "", // 任职状态
        "a020730": "", // 是否班子领导成员
        "sdZwSfzyzw": "", // 是否主要职务
        "zwSfldzw": "", // // 是否领导职务
          // zw_sfldzw: ''
      },
      selectIndex: 0,
      isEdit: false,
      isAdd: true
    }
  },

  watch: {
  },
  computed: {
    tableData: {
      get() {
        return this.value
      },
      set(value) {
        let res = []
        if(value && value.length > 0) {
          res = value.map(item => {
            delete item.$index
            return item
          })
        }
        this.$emit('update:value', res)
      }
    },
    showText() { // 全日学历
      if (this.tableData.length > 0) {
        let qrzData =  this.tableData.filter(item => item.a16001 == '[1]全日制')
        if(qrzData && qrzData.length >0) {
          return qrzData[0].a16002.split(']')[1]
        }
      } else {
        return ''
      }
    },
  },
  methods: {
    changeA02001B(checkval,checkData) {
      console.log({ checkval,checkData})
      this.$set(this.form, 'a02001C', checkData.name)
    },
    saveNewData(data) {
      console.log(data,'本行数据')
      this.$set(this.tableData,)
    },
    deleteData() {},
    saveA02001B(val,checkData){
      console.log(checkData,'saveA02001B')
      this.form.a02001C = checkData.name
    },
    changeA02016B(val,checkData){
      console.log(checkData,'changeA02016B')
      this.form.a02016A = checkData.name
    },
    addRow() {
      this.isEdit = false
      this.isAdd = true
      this.resetForm()
      this.showAddDialog = true
    },
    changeRow(row) {
      this.isEdit = true
      this.isAdd = false
      this.form = row

      this.selectIndex = row.$index
      this.showAddDialog = true
    },
    delRow(row) {
      this.tableData.splice(row.$index, 1)
    },
    saveForm() {
      let data = this.$deepClone(this.form)
      // delete data.$index
      if(this.isAdd) {
        this.tableData.push(data)
      } else {
        this.$set(this.tableData, this.selectIndex, data);
      }
      // this.tableData.push(this.form)
      this.showAddDialog = false
      this.resetForm()
    },
    resetForm() {
      for (let key in this.form) {
        this.$set(this.form, key, '')
      }
    }
  },
}
</script>

<style scoped lang="scss">
.EmpA02 {
  width: 100%;
  height: 100%;

  .showText {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    //text-align: center;
    //justify-content: center;
  }

 ::v-deep .el-dialog__wrapper .formRow .el-input__inner {
    text-align: left !important;
    border: 1px solid #DCDFE6 !important;
  }
}

</style>
<style lang="scss">
.crud-drawer {
  .el-drawer__header {
    padding: 10px;
    margin-bottom: 0px;
  }
}
</style>